<template>
    <div>
        <my-header></my-header>
        <div class="cart">
            <div class="box">
                <div class="top">
                    <a-button type="primary" danger @click="deleteCart">清空购物车</a-button>
                </div>

                <div v-if="list">
                    <div class="cartList" v-for="item in list">
                        <div class="shopName">
                            <div style="color: #87d068">
                                {{item.shopEntity.name}}
                            </div>
                            <div>
                                <a-space>
                                    <div style="margin-right: 10px">
                                        总价: <span>{{item.totalPrice}}元</span>
                                    </div>
                                    <a-button type="primary" @click="apply(item)">支付</a-button>
                                    <a-button type="primary" danger @click="deleteShopGoods(item)">删除</a-button>
                                </a-space>
<!--                                <a-button type="primary" danger @click="deleteShopGoods(item)">删除</a-button>-->
                            </div>
                        </div>
                        <div class="listItem" v-for="item2 in item.cartItemEntityList">
                            <a-row>
                                <a-col :span="8">
                                    <div class="item">
                                        {{item2.goodsEntity.goodsName}}
                                    </div>
                                </a-col>
                                <a-col :span="8">
                                    <div style="display: flex">
                                        <a-button size="large" @click="reduceCount(item2)">
                                            <template #icon>
                                                <MinusOutlined />
                                            </template>
                                        </a-button>
                                        <div style="display: flex; width: 60%">
                                            <div style="color: red; margin: 0 10px">
                                                {{item2.goodsNum }}份
                                            </div>
                                            <div style="color: red; margin: 0 10px">
                                                {{item2.goodsNum * item2.goodsEntity.presentPrice}}元
                                            </div>
                                        </div>
                                        <a-button size="large" @click="addCount(item2)">
                                            <template #icon>
                                                <PlusOutlined />
                                            </template>
                                        </a-button>
                                    </div>
                                </a-col>
                                <a-col :span="8">
                                    <div>
                                        <a-button type="primary" danger @click="deleteGoods(item2)">删除</a-button>
                                    </div>
                                </a-col>
                            </a-row>



                        </div>
                    </div>
                    <div class="totalCount">
                        <div>
<!--                            <div class="count">-->
<!--                                总数量为：20件-->
<!--                            </div>-->
<!--                            <div class="money">-->
<!--                                总金额为：100元-->
<!--                            </div>-->
                        </div>
                        <div>
<!--                            <a-button type="primary" @click="apply">支付</a-button>-->
                        </div>
                    </div>
                </div>

                <div v-else>
                    <a-empty />
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import {defineComponent, reactive, onMounted, toRefs} from "vue";
import myHeader from './header'
import {PlusOutlined, MinusOutlined} from "@ant-design/icons-vue";
import {
    apiGetCartList,
    apiAddOne,
    apiReduceOne,
    apiDeleteShopGoods,
    apiGetGoodsRecord,
    apiBalanceApply, apiGetUserInfo, apiGetUserAddress
} from "../../../api";
import {message} from "ant-design-vue";

export default defineComponent({
    name: "shoppingCart",
    components: { myHeader, PlusOutlined, MinusOutlined},
    setup () {
        const state = reactive({
            list: [],
            // accountId: JSON.parse(window.localStorage.getItem('user')).id ? JSON.parse(window.localStorage.getItem('user')).id: null,
            accountId: null,
        })

        // 获取购物车列表
        const getList = () => {
            apiGetCartList({}).then((res) => {
                state.list = res.data.data.cartEntities
                console.log(state.list)
            })
        }

        // 点击减少
        const reduceCount = (val) => {
            // 首先判断是不是小于 1
            if (val.goodsNum <=1) {
                message.warning('最少选择一份,不能再少了')
                return
            }
            const params = {
                cartItemId: val.id
            }
            apiReduceOne(params).then((res) => {
                if (res.data.code == 200) {
                    getList()
                }
            })
        }

        // 点击增加
        const addCount = (val) => {
            // 找到对应的记录，进行修改
            const params = {
                cartItemId: val.id
            }
            apiAddOne(params) .then((res) => {
                if (res.data.code == 200) {
                    // 增加成功，调用接口
                    getList()
                }
            })
        }

        // 删除该购物车的商品
        const deleteGoods = (val) => {
            // 找到对应的记录，进行删除
            const params = {
                type: 1,
                id: val.id
            }
            apiDeleteShopGoods(params).then((res) => {
                if (res.data.code == 200) {
                    // 删除成功，调用接口，刷新列表
                    getList()
                }
            })

        }

        // 删除该店铺下的商品
        const deleteShopGoods = (val) => {
            // 找到对应的记录，进行删除
            // console.log(8888888, val)
            const params = {
                type: 2,
                id : val.id
            }
            apiDeleteShopGoods(params).then((res) => {
                if (res.data.code == 200) {
                    // 删除成功，调用接口，刷新列表
                    getList()
                }
            })
        }

        // 清空购物车
        const deleteCart = () => {
            console.log(123)
            const params = {
                type: 3
            }
            apiDeleteShopGoods(params).then((res) => {
                if (res.data.code == 200) {
                    // 删除成功，调用接口，刷新列表
                    getList()
                }
            })
            state.list = []
        }

        // 结算
        const apply = async (val) => {
            // 判断余额够不够
            const res = await apiGetUserInfo({})
            let balance = res.data.data.balance
            if (balance< val.totalPrice) {
                message.warning('您的余额已不足，请先前往个人中心充值')
                return;
            }
            // 判断有没有收货地址
            // if (!window.localStorage.getItem('address')) {
            //     message.warning('您还没有添加收货地址，请先添加')
            //     return
            // }
            const params = {
                id: state.accountId
            }
            const addres = await apiGetUserAddress(params)
            if (!addres.data.data.detailAddress) {
                message.warning('请先添加收货地址')
                return false
            }
            // 判断余额够不够
            // console.log(JSON.parse(window.localStorage.getItem('user')).balance)
            // const balance = JSON.parse(window.localStorage.getItem('user')).balance

            // let tempMoney = balance - val.totalPrice
            // let info = JSON.parse(window.localStorage.getItem('user'))
            // info.balance = tempMoney
            // window.localStorage.setItem('user', JSON.stringify(info))
            // console.log(8888888888,val)
            // return false
            apiGetGoodsRecord(val).then((res) => {
                if (res.data.code == 200) {
                    const params = {
                        sn: res.data.data.sn
                    }
                    // 先判断余额是否充足
                    apiBalanceApply(params).then((res) => {
                        if (res.data.code == 200) {
                            message.success('购买成功')
                            // 获取购物车列表
                            getList()
                        }
                    })
                }
            })
        }

        onMounted(() => {
            getList()
            apiGetUserInfo({}).then((res) => {
                if (res.data.code == 200) {
                    state.accountId = res.data.data.id
                }
            })
        })


        return {
            ...toRefs(state),
            reduceCount,
            addCount,
            deleteGoods,
            deleteShopGoods,
            deleteCart,
            apply
        }
    }
})
</script>

<style lang="less" scoped>
    .cart {
        height: calc(100vh - 50px) ;
        background: url("../../../assets/img/background/bg.jpeg") repeat;
        padding-top: 20px;
        font-size: 22px;


        .top {
            padding-top: 10px;
            padding-left: 10px;
        }

        .box {
            width: 80%;
            height: 100%;
            margin: 0 auto;
            background: #fff;
            overflow: auto;

            .top {
                display: flex;
                justify-content: flex-start;

            }

            .cartList {

                padding: 10px 50px;
                border: 2px solid #f0f0f0;
                margin: 10px 10px;

                .shopName {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .listItem {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }
            }

            .totalCount {
                margin-left: 40px;
                margin-right: 40px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;

            }
        }
    }

    ::v-deep .ant-row {
        width: 80%;
    }
</style>
